<template>
  <div class="front-page-container">
    <div class="front-page">
      <!-- 商品搜索结果展示部分 -->
      <goods-sourse2 :cgoods="goods" @handleSearch="handleSearch" />
      <!-- 分页组件 -->
      <pagination
        @item-click="pageClick"
        :cUrl="url"
        :cTotal="total"
        :cPageSize="pageSize"
      />
    </div>
    <div class="right-info">
      <!-- 发布信息按钮 -->
      <div class="free-btn">
        <img src="../assets/img/fabuxinxi2.png" @click="toPublish" />
      </div>
      <!-- 热门信息展示 -->
      <div class="top-info">
        <h3 class="top-info-title">近期热门信息</h3>
        <ul class="info-list">
          <li
            class="item-info"
            v-for="(item, index) in goodsTopics"
            :key="index"
            @click="handleDetail(item)"
          >
            <span class="ranking">{{ index + 1 }}</span>
            <span class="content">{{ item.content }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { selectAllPage, selectGoodsPage } from "../api/order";
import GoodsSourse2 from "../components/GoodsSource2.vue";
import Pagination from "../components/Pagination.vue";

export default {
  data() {
    return {
      goods: [],
      goodsTopics: [],
      total: 0,
      pageSize: 30,
      url: "/order/All/",
      searchValue: "",
      goodsCount2: sessionStorage.getItem("/order/All/pageCode")
        ? sessionStorage.getItem("/order/All/pageCode")
        : 1,
    };
  },
  mounted() {
    this.getData();
    this.getTopicData();
  },
  methods: {
    getData() {
      this.$store.commit("updateActiveIndex", "1");
      selectAllPage({
        keys: this.searchValue,
        pageNum: this.goodsCount2,
      }).then((res) => {
        if (res.flag == true) {
          this.goods = res.data.list;
          this.total = res.data.total;
        } else {
          // 错误处理
        }
      });
    },
    getTopicData() {
      selectGoodsPage({
        pageNum: "1",
        keys: "",
      }).then((res) => {
        if (res.flag == true) {
          let tmp = res.data.list;
          tmp.forEach((e, i) => {
            if (i < 10) {
              this.goodsTopics.push(e);
            }
          });
        } else {
          // 错误处理
        }
      });
    },
    pageClick(item) {
      this.goods = item;
    },
    toPublish() {
      if (localStorage.getItem("token")) {
        this.$router.push("/home/addmessage/publishgoods").catch((err) => err);
      } else {
        this.$router.push(`/login`).catch((err) => err);
      }
    },
    handleSearch(val) {
      this.searchValue = val;
      this.getData();
    },
    handleDetail(item) {
      this.$store.commit("updateOrderId", item.orderId);
      this.$router.push(`/home/details?orderId=${item.orderId}`).catch((err) => err);
    },
  },
  components: {
    Pagination,
    GoodsSourse2,
  },
};
</script>

<style lang="less" scoped>
/* 主容器样式，左侧外层设置为透明 */
/* 主容器样式，调整为透明 */
.front-page-container {
  width: 1550px; /* 页面宽度 */
  margin: 0 auto;
  background-color: transparent; /* 背景透明 */
  overflow: hidden; /* 避免浮动问题 */
  display: flex;
  justify-content: space-between; /* 两侧内容左右对齐 */
}

/* 左侧内容部分 */
.front-page {
  width: 1200px; /* 左侧内容宽度 */
  background-color: transparent; /* 背景透明 */
  display: flex;
  flex-wrap: wrap; /* 自动换行布局 */
  gap: 10px; /* 缩小卡片之间的间隙 */
  justify-content: flex-start; /* 卡片靠左对齐 */
}

/* 商品展示部分的卡片样式 */
.goods-card {
  background-color: #fff; /* 保持白色背景 */
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  width: 220px; /* 卡片固定宽度，保证更多卡片一行展示 */
  height: 320px; /* 固定卡片高度 */
  margin-bottom: 10px; /* 每个卡片底部间隙 */
}

/* 右侧信息展示区美化 */
.right-info {
  width: 280px; /* 适当缩小右侧宽度 */
  padding: 15px;
  background-color: #fff; /* 保持白色背景 */
  border-radius: 8px;
  height: 600PX;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  margin-top: 0; /* 紧贴顶部 */
}

/* 发布信息按钮样式 */
.free-btn {
  text-align: center;
  margin-bottom: 20px;
  img {
    width: 100px;
    cursor: pointer;
    transition: transform 0.3s ease;
    &:hover {
      transform: scale(1.1);
    }
  }
}

/* 热门信息标题 */
.top-info-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  text-align: center;
}
/* 热门信息列表样式 */
.info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 热门信息条目样式 */
.item-info {
  font-size: 14px;
  color: #555;
  padding: 8px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  transition: color 0.3s ease;
  align-items: center;
  margin-bottom: 5px; /* 紧凑列表间距 */
  
  .ranking {
    font-size: 16px;
    font-weight: bold;
    margin-right: 10px;
    color: #ff6f61; /* 排名前三高亮 */
  }

  .content {
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  &:hover {
    color: #035d1c;
  }
}

/* 样式化前3名 */
.item-info:nth-child(1) .ranking,
.item-info:nth-child(2) .ranking,
.item-info:nth-child(3) .ranking {
  color: #ff4500; /* 前三名用醒目的橙色 */
}

.item-info:nth-child(1) .content,
.item-info:nth-child(2) .content,
.item-info:nth-child(3) .content {
  font-weight: bold; /* 前三名加粗 */
}


</style>
